﻿@page "/tree-grid/tool-bar-template"

@using Syncfusion.Blazor.TreeGrid
@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.Data
@*Hidden:Lines*@
@using ej2_blazor_selfdata
@inherits SampleBaseComponent;
@*End:Hidden*@
@using Syncfusion.Blazor.Navigations


@{
    List<ItemModel> ToolbarItems = new List<ItemModel>();
    ToolbarItems.Add(new ItemModel() { Text = "Expand all", TooltipText = "Expand all", PrefixIcon = "e-expand", Id = "ExpandAll" });
    ToolbarItems.Add(new ItemModel() { Text = "Collapse all", TooltipText = "Collapse all", PrefixIcon = "e-collapse", Id = "CollapseAll" });
    ToolbarItems.Add(new ItemModel() { Text = "Quick Filter", TooltipText = "Quick Filter", Id = "toolbarfilter" });
}

<SampleDescription>
    <p>  This sample explains the way of rendering custom template element Quick Filter in a toolbar and while click on the icon filters the Task Name column in Tree Grid using API.</p>
</SampleDescription>
<ActionDescription>
   <p>Custom toolbar items can be added by defining the toolbar as a collection of ItemModels. Actions for this customized toolbar items are defined in the <code>OnToolbarClick</code> event. </p>
   <p>In this sample, rendered the custom template element Quick Filter along with predefined toolbar items ExpandAll and CollapseAll. While click on the Quick Filter button then the filtering is applied for Task Name column.</p>
   <p>More information on the toolbar template can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/treegrid/toolbar/'>documentation section</a>.</p>
</ActionDescription>


<div class="col-lg-12 control-section">
    <div class="content-wrapper">
        <div class="row">
            <SfTreeGrid AllowFiltering="true" @ref="TreeGrid" DataSource="TreeData" IdMapping="TaskID" ParentIdMapping="ParentID" TreeColumnIndex="1" Toolbar="ToolbarItems" Height="350">
                <TreeGridEvents TValue="SelfReferenceData" OnToolbarClick="ToolBarClick"></TreeGridEvents>
                <TreeGridColumns>
                    <TreeGridColumn Field="TaskID" HeaderText="Task ID" Width="80" TextAlign="TextAlign.Right"></TreeGridColumn>
                    <TreeGridColumn Field="TaskName" HeaderText="Task Name" Width="145"></TreeGridColumn>
                    <TreeGridColumn Field="StartDate" HeaderText="Start Date" Format="d" Type=ColumnType.Date Width="100" TextAlign="TextAlign.Right"></TreeGridColumn>
                    <TreeGridColumn Field="Duration" HeaderText="Duration" Width="100" TextAlign="TextAlign.Right"></TreeGridColumn>
                    <TreeGridColumn Field="Progress" HeaderText="Progress" Width="100"></TreeGridColumn>
                    <TreeGridColumn Field="Priority" HeaderText="Priority" Width="100" TextAlign="TextAlign.Right"></TreeGridColumn>

                </TreeGridColumns>
            </SfTreeGrid>
        </div>
    </div>
</div>

<style>
    .e-expand::before {
        content: '\e82e';
    }

    .e-collapse::before {
        content: '\e834';
    }
</style>


@code{
    SfTreeGrid<SelfReferenceData> TreeGrid;

    public List<SelfReferenceData> TreeData { get; set; }

    protected override void OnInitialized()
    {
        this.TreeData = SelfReferenceData.GetTree().Take(12).ToList();
    }
    public async Task ToolBarClick(Syncfusion.Blazor.Navigations.ClickEventArgs Args)
    {
        if (Args.Item.Text == "Expand all")
        {
            await this.TreeGrid.ExpandAllAsync();

        }
        if (Args.Item.Text == "Collapse all")
        {
            await this.TreeGrid.CollapseAllAsync();

        }
        if (Args.Item.Text == "Quick Filter")
        {
            await this.TreeGrid.FilterByColumnAsync("TaskName", "startswith", "Child");
        }
    }
}
